<template>
  <div>
    <headers></headers>
    <div
      class="app-basement app-height"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
    >
      <div class="content-basement content-top">
        <div
          class="li"
          v-for="item in list"
          :key="item.id"
          @click="clickLi(item)"
        >
          <div class="li_text">
            <p>{{ item.title }}</p>
            <span class="contentSpan">
              {{ item.brief }}
            </span>
            <span
              ><i>{{ new Date(item.create_time).getDate() }}</i
              >/{{
                new Date(item.create_time).getFullYear() +
                "." +
                (new Date(item.create_time).getMonth() + 1)
              }}</span
            >
          </div>
          <img :src="item.cover ? item.cover : imgsrc" alt="" />
        </div>
        <div class="page" v-if="list.length != 0">
          <el-pagination
            background
            layout="sizes,prev, pager, next,jumper"
            :total="total"
            :page-sizes="[6, 10, 15, 30]"
            :page-size="limit"
            :current-page="page"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- <detailsBax ref="details"></detailsBax> -->
    <footers></footers>
  </div>
</template>

<script>
import headers from "@/components/header";
import footers from "@/components/footer";
import { articleList } from "@/api/apply.js";
// import detailsBax from './details.vue'
export default {
  components: { headers, footers },
  data() {
    return {
      total: 10,
      limit: 6,
      page: 1,
      list: [],
      loading: false,
      imgsrc: require("@/assets/pxgg.jpg"),
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.seach();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.seach();
    },
    seach() {
      this.loading = true;
      articleList({
        page: this.page,
        limit: this.limit,
        category: "培训动态",
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.total = res.data.count;
          this.list = res.data.list;
        }
      });
    },
    clickLi(row) {
      // console.log(row)
      this.$router.push({
        path: "/regulations/details",
        query: {
          content: row.content,
          title: row.title,
          date: row.create_time,
        },
      });
    },
  },
  created() {
    this.seach();
  },
};
</script>

<style lang="scss" scoped>
.app-height {
  min-height: calc(100vh - 548px);
  .content-top {
    margin-top: 24px;
  }
}
.li {
  margin-bottom: 24px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  .li_text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    span {
      color: #999;
      i {
        font-style: normal;
        color: #009999;
        font-size: 24px;
        margin-right: 12px;
      }
    }
    .contentSpan {
      flex: 1;
    }
  }
  & > img {
    height: 125px;
  }
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  }
}
.page {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
  // ::v-deep{
  //     .el-pagination{
  //         width: 45%;
  //         display: flex;
  //         justify-content: space-between;
  //         .el-pager{
  //             flex:1;
  //         }
  //     }
  // }
}
</style>